<template>
  <div class="Good-dialog">
    <el-dialog v-model="isShowDialog" draggable :close-on-click-modal="false" width="769px">
      <template #header>
        <div style="color: #555555">
          <span>{{ editUserProps.title }}</span>
        </div>
      </template>
      <el-form :model="editUserProps.userData" ref="ruleFormRef" size="default" label-width="100px">
        <el-tabs v-model="selectedTabName">
          <el-tab-pane :label="$t('message.sysUser.baseInfo')" name="baseInfo">
            <el-row :gutter="35">
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item
                  :label="$t('message.sysUser.account')"
                  prop="account"
                  :rules="[{ required: true, message: t('message.userAlter.accountEmpty'), trigger: 'blur' }]"
                >
                  <el-input v-model="editUserProps.userData.account" :placeholder="$t('message.sysUser.account')" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item
                  :label="$t('message.sysUser.name')"
                  prop="name"
                  :rules="[{ required: true, message: t('message.userAlter.nameEmpty'), trigger: 'blur' }]"
                >
                  <el-input v-model="editUserProps.userData.name" :placeholder="$t('message.sysUser.name')" />
                </el-form-item>
              </el-col>
              <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
								<el-form-item label="昵称" prop="nickName">
									<el-input v-model="editUserProps.userData.nickName" placeholder="昵称"  />
								</el-form-item>
							</el-col> -->
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item
                  :label="$t('message.sysUser.phone')"
                  prop="phone"
                  :rules="[{ pattern: /^1[34578]\d{9}$/, message: t('message.userAlter.phoneFormat'), trigger: 'blur' }]"
                >
                  <el-input v-model="editUserProps.userData.phone" :placeholder="$t('message.sysUser.phone')" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="$t('message.sysUser.birthday')" prop="birthday">
                  <el-date-picker
                    v-model="editUserProps.userData.birthday"
                    type="date"
                    :placeholder="$t('message.sysUser.birthday')"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="$t('message.sysUser.gender')" prop="gender">
                  <el-radio-group v-model="editUserProps.userData.gender">
                    <el-radio v-for="d in editUserProps.genderData" :key="d.value" :value="d.value">{{ d.name }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-divider border-style="dashed" content-position="center">
                <div style="color: #b1b3b8">{{ $t("message.sysUser.organization") }}</div>
              </el-divider>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item
                  :label="$t('message.sysUser.belongOrg')"
                  prop="orgId"
                  :rules="[{ required: true, message: $t('message.userAlter.orgEmpty'), trigger: 'blur' }]"
                >
                  <el-cascader
                    :options="editUserProps.orgData"
                    :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'orgName' }"
                    :placeholder="$t('message.sysUser.belongOrg')"
                    class="w100"
                    v-model="editUserProps.userData.orgId"
                  >
                    <!-- <el-cascader
										:options="props.orgData"
										:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'orgName' }"
										:placeholder="$t('message.sysUser.belongOrg')"
										
										class="w100"
										v-model="editUserProps.userData.orgId"
										@change="changePos"
									> -->
                    <template #default="{ node, data }">
                      <span>{{ data.orgName }}</span>
                      <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                    </template>
                  </el-cascader>
                </el-form-item>
              </el-col>
              <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
								<el-form-item :label="$t('message.sysUser.position')" prop="posId" :rules="[{ required: true, message: '职位名称不能为空', trigger: 'blur' }]">
									<el-select v-model="editUserProps.userData.posId" :placeholder="$t('message.sysUser.position')" style="width: 100%">
										<el-option v-for="d in state.posData" :key="d.id" :label="d.name" :value="d.id" />
									</el-select>
								</el-form-item>
							</el-col> -->
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="$t('message.sysUser.workId')" prop="workId">
                  <el-input v-model="editUserProps.userData.workId" :placeholder="$t('message.sysUser.workId')" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="$t('message.sysUser.joinDate')" prop="joinDate">
                  <el-date-picker
                    v-model="editUserProps.userData.joinDate"
                    type="date"
                    :placeholder="$t('message.sysUser.joinDate')"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane :label="$t('message.sysUser.archiveInfo')" name="archiveInfo">
            <el-row :gutter="35">
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="$t('message.sysUser.cardType')" prop="cardType">
                  <el-select
                    v-model="editUserProps.userData.cardType"
                    :placeholder="$t('message.sysUser.cardType')"
                    style="width: 100%"
                  >
                    <el-option label="身份证" :value="0" />
                    <el-option label="护照" :value="1" />
                    <el-option label="出生证" :value="2" />
                    <el-option label="港澳台通行证" :value="3" />
                    <el-option label="外国人居留证" :value="4" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="$t('message.sysUser.idCardNum')" prop="idCardNum">
                  <el-input v-model="editUserProps.userData.idCardNum" :placeholder="$t('message.sysUser.idCardNum')" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="$t('message.sysUser.nation')" prop="nation">
                  <el-input v-model="editUserProps.userData.nation" :placeholder="$t('message.sysUser.nation')" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item
                  :label="$t('message.sysUser.email')"
                  prop="email"
                  :rules="[
                    {
                      pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                      message: t('message.userAlter.emailFormat'),
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-input v-model="editUserProps.userData.email" :placeholder="$t('message.sysUser.email')" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item :label="$t('message.sysUser.address')" prop="address">
                  <el-input
                    v-model="editUserProps.userData.address"
                    :placeholder="$t('message.sysUser.address')"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
								<el-form-item label="毕业学校" prop="college">
									<el-input v-model="editUserProps.userData.college" placeholder="毕业学校"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
								<el-form-item label="文化程度" prop="cultureLevel">
									<el-select v-model="editUserProps.userData.cultureLevel" placeholder="文化程度" style="width: 100%">
										<el-option label="小学" :value="0" />
										<el-option label="初中" :value="1" />
										<el-option label="高中" :value="2" />
										<el-option label="中专" :value="3" />
										<el-option label="大专" :value="4" />
										<el-option label="本科" :value="5" />
										<el-option label="硕士研究生" :value="6" />
										<el-option label="博士研究生" :value="7" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
								<el-form-item label="政治面貌" prop="politicalOutlook">
									<el-input v-model="editUserProps.userData.politicalOutlook" placeholder="政治面貌"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
								<el-form-item label="办公电话" prop="officePhone">
									<el-input v-model="editUserProps.userData.officePhone" placeholder="办公电话"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
								<el-form-item label="紧急联系人" prop="emergencyContact">
									<el-input v-model="editUserProps.userData.emergencyContact" placeholder="紧急联系人"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
								<el-form-item label="联系人电话" prop="emergencyPhone">
									<el-input v-model="editUserProps.userData.emergencyPhone" placeholder="联系人电话"  />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
								<el-form-item label="联系人地址" prop="emergencyAddress">
									<el-input v-model="editUserProps.userData.emergencyAddress" placeholder="紧急联系人"  type="textarea" />
								</el-form-item>
							</el-col> -->
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item :label="$t('message.sysUser.remark')" prop="remark">
                  <el-input v-model="editUserProps.userData.remark" :placeholder="$t('message.sysUser.remark')" type="textarea" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" size="default">{{ $t("message.commonBtn.cancel") }}</el-button>
          <el-button type="primary" @click="submit" size="default">{{ $t("message.commonBtn.submit") }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="systemEditUser">
import { ref } from "vue";
import { feature } from "@/utils/axios-utils";
import { SysOrg, SysUser, DictData } from "@/api-services/models/system";
import { useI18n } from "vue-i18n";
import userApi from "@/api-services/apis/system/userApi";
import { NotificationError, NotificationSuccess } from "@/utils/notification";
// 定义变量内容
const { t } = useI18n();
export interface EditUserProps {
  title: String;
  orgData: Array<SysOrg.SysOrg>;
  genderData: Array<DictData.SysDictData>;
  userData: SysUser.SysUser;
}

const selectedTabName = ref("baseInfo");
const isShowDialog = ref(false);
const ruleFormRef = ref();

const editUserProps = ref<EditUserProps>({
  title: "",
  userData: {},
  orgData: [],
  genderData: []
});

// 打开弹窗
const openDialog = (params: EditUserProps) => {
  isShowDialog.value = true;
  editUserProps.value = params;
};

// const changePos = async ()=>{
// 	var position= await positionApi.list({orgId:editUserProps.userData.orgId})
// 	state.posData=position.data.data;
// }
const emits = defineEmits(["refresh"]);

// 关闭弹窗
const closeDialog = () => {
  emits("refresh");
  isShowDialog.value = false;
};

// 取消
const cancel = () => {
  isShowDialog.value = false;
};

// 提交
const submit = async () => {
  ruleFormRef.value.validate(async (valid: boolean) => {
    if (!valid) return;
    let err: Error | null;
    if (editUserProps.value.userData.id != undefined && editUserProps.value.userData.id > 0) {
      [err] = await feature(userApi.update(editUserProps.value.userData));
    } else {
      [err] = await feature(userApi.add(editUserProps.value.userData));
    }
    if (err) {
      NotificationError(err.message);
    } else {
      NotificationSuccess(editUserProps.value.title + t("message.commontInfo.success"));
      closeDialog();
    }
  });
};

// 导出对象
defineExpose({ openDialog });
</script>
